<style scoped>
.ipt {
  display: flex;
}
.ant-btn > i {
  margin-right: 10px;
}
.ant-input:placeholder-shown {
  margin-right: 5px;
}
.ant-list * :nth-child(1) {
  margin-right: 20px;
}
span {
  color: aliceblue;
}
p {
  color: aliceblue;
}
.c {
  overflow: hidden;
  overflow: auto;
}
</style>

<template>
  <div class="home" :style="{ background: 'rgb(30,109,174)', padding: '26px 16px 16px' }">
    <!-- 消息列表 -->
    <a-list ref="record" item-layout="horizontal" :data-source="msgList">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-list-item-meta>
          <p slot="title">
            <span> {{ item.user }}</span>
            <span>发送时间：{{ $moment(item.dateTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
          </p>
          <p slot="title">会话内容：{{ item.msg }}</p>
          <a-avatar slot="avatar" src="https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png"/>
        </a-list-item-meta>
      </a-list-item>
    </a-list>

    <!-- 按钮 -->
    <div class="ipt">
      <a-input placeholder="请输入消息" @keyup.enter="enterSearch" v-model="msg"/>
      <a-button type="dashed" ghost @click="handleSendBtnClick"><i class="iconfont icon-SEND"></i>发送</a-button>
    </div>
  </div>
</template>
<script>
//调用
const ws = new WebSocket("ws://localhost:8000");
export default {
  name: "home",
  data() {
    return {
      msg: "",
      username: "",
      msgList: [],
    };
  },
  //在生命周期updated时，改变并且要在页面重新渲染完成之后

  mounted() {
    //消息显示最后发布
    // this.scrollToBottom();
    //将用户存储到本地
    this.username = localStorage.getItem("username");
    //判断 如果本地存储没有当前用户名 则 跳转回登录页
    if (!this.username) {
      this.$router.push("/Login");
      return;
    }
    //连接
    ws.addEventListener("open", this.handleWsOpen.bind(this), false);
    //关闭
    ws.addEventListener("close", this.handleWsClose.bind(this), false);
    //错误
    ws.addEventListener("error", this.handleWsError.bind(this), false);
    //处理
    ws.addEventListener("message", this.handleWsMessage.bind(this), false);
  },
  //消息显示最后发布
  updated() {
    // this.scrollToBottom();
  },
  
  methods: {
    //消息显示最后发布
    // scrollToBottom() {
    //   this.$nextTick(() => {
    //     this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
    //   });
    // },
    //发送消息 回车事件
    enterSearch() {
      document.onkeydown = (e) => {
        if (e.keyCode === 13) {
          if (this.msg == "") {
            this.$message.warning("不能发送空白消息", 1);
          } else {
            this.handleSendBtnClick();
          }
        }
      };
    },
    //发送逻辑
    handleSendBtnClick(e) {
      if (this.msg == "") {
        this.$message.warning("不能发送空白消息", 1);
      } else {
        const msg = this.msg;
        //去除空格
        if (!msg.trim().length) {
          return;
        }
        //接收发送的内容
        ws.send(
          //将返回的数据以对象的形式 展示在前台
          JSON.stringify({
            id: new Date().getTime(),
            user: this.username,
            dateTime: new Date().getTime(),
            msg: this.msg,
          })
        );
        //输入完信息后 置空
        this.msg = "";
      }
    },
    //建立连接
    handleWsOpen(e) {
      console.log("FE:WebSocket open", e);
    },
    //关闭连接
    handleWsClose(e) {
      console.log("FE:WebSocket close", e);
    },
    //错误信息
    handleWsError(e) {
      console.log("FE:WebSocket error", e);
    },
    //前端接收广播数据
    handleWsMessage(e) {
      //数据类型转换 为对象的形式
      const msg = JSON.parse(e.data);

      this.msgList.push(msg);

      console.log(msg);
      // console.log("FE:WebSocket message", e);
    },
  },
};
</script>
